<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
		.text{
		width:200px;
        height:200px;
       
        background:#ccc;}
		/*     把DIV改为 display:table-cell;(单元格) 形式 然后居中*/
		
		/*
		.text{
		width:200px;
        height:200px;
        margin:100px auto;
        background:#ccc;
        display:table-cell;
        vertical-align:middle;	
        text-align:center;		
		}
		*/
		/*  把行内元素 img 变成行内块元素 然后设置行高 text-align:center;  */
/*
		.text{
		width:200px;
        height:200px;
        margin:100px auto;
        background:#ccc;
		line-height:200px;
		text-align:center;
		}
	*/	
		/*  直接设置行高  然后设置 margin-left或者 padding-left到局中  */
		/*.text{
		line-height:200px;
		}
		*/
          .text{
		  margin:50px;
		  border:1px solid;
		  padding:1px;
		  display:inline-block;
		  }
		
		.text1{
		width:200px;
        height:200px;
        margin:100px auto;
        background:#999;
		margin:100px;
		border:1px solid;
		}
		/*   不显示padding 只显示内容    */
	   .text2 input{
		display:inline-block;
		width:30px;
		height:30px;
		border-radius:50%;
	
		background:#ccc;
		border:2px solid blue;
		padding:5px;
		background-clip:content-box;
		
		}
		
		
		
		
/*         练习            */
      .pregnancy{
	  margin:20px auto;
	 width:1000px; 
	 height:158px;
	border-bottom:1px solid #ccc;
	 
	  
	  
	  }
     
	 
	 .pregnancy .s0{
	 display:inline-block;
	 width:230px;
	 height:158px;
	 line-height:158px;

	 font-size:16px;
	 color:#c3c3c3;
	 float:left;
	
	 }
	 .pregnancy .pregnancy1{
	 width:670px;
	 height:158px;
	 
	 float:left;
	 
	 }
	 .pregnancy .pregnancy1 h2{
	 line-height:74px;
	 font-size:16px;
	 color:#4f5855;
	 
	 }
   .pregnancy .pregnancy1 input{
      display:inline-block;
      width:30px;
	  height:30px;
	  border-radius:50%;
	  padding:5px;
      border:1px solid blue;
	  margin-right:8px;
   }
	
		
		pregnancy .pregnancy1 span{
		display:inline-block;
		height:40px;
		font-size:16px;
		}
		.pregnancy .s1{
		display:inline-block;
		width:130px;
		height:40px;
		line-height:40px;
		color:#6e7877;
		}
		.pregnancy .pregnancy1 .s2{
		display:inline-block;
		width:88px;
		height:40px;
		line-height:40px;
		color:#878c90;
		}
		.pregnancy .pregnancy1 .s3{
		display:inline-block;
         height:40px;
		line-height:40px;
		color:#878c90;
		}
		
		.pregnancy .pregnancy1 input:hover{
		background:#5a8cc1;
		background-clip:content-box;
		}
		
		
		
		</style>
		
		</head>
		
		<body>
		   <div class="text">
		
		   </div>
	
		        <div class="text1">
	    </div>
		<div  class="text2"> <input>
		</div>
		
		
		
		<div class="pregnancy">
		   <span class="s0">pregnancy</span>
		   <div class="pregnancy1">
		   <h2>Have you been diagnosed whith diabete befor?</h2>
		   <input class="inp1"><span class="s1">Pre-diabetes </span>
		   <input class="inp2"><span class="s2">Type-2</span>
		 
		   <input class="inp3"><span class="s3">Neither</span>
		   </div>
		
		
		</div>
		</body>
		</html>